<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				margin-left: 30%;
				padding-top: 15px;
			}
			table,thead,th,td {
				border: 1px #333333 solid;
			}
			table {
				margin: 90px auto;
			}
			th,td {
				width: 300px;
			}
			.get {
				margin-left: 4em;
			}
			.del {
				color: blue;
				text-align: center;
				cursor: pointer;
			}
			.del:hover {
				color: orange;
			}
		</style>
	</head>
	<body>
		<div>
			<p>姓名：
			<input type="text" id="name" placeholder="请输入姓名" /></p>
		</div>
		<div>
			<p>班级：
			<input type="text" id="class" placeholder="请输入班级" /></p>		
		</div>
		<div>
			<p>学号：
			<input type="text" id="no" placeholder="请输入学号" /></p>
		</div>
		<div>
			<input type="button" value="提交" class="get" onclick="getValue()" />
		</div>
		<table id="tb1">
			<thead>
				<th>姓名</th>
				<th>班级</th>
				<th>学号</th>
				<th>操作栏</th>
			</thead>
		</table>
	</body>
	<script type="text/javascript">
		function getValue() {
			let iName = document.getElementById('name')//姓名
			let iClass = document.getElementById('class')//班级
			let iN0 = document.getElementById('no')//学号
			if(iName.value === '') {
				alert("请输入姓名")
				return
			}
			if(iClass.value === '') {
				alert("请输入班级")
				return
			}
			if(iN0.value === '') {
				alert("请输入学号")
				return
			}
			let oTableWarrper = document.getElementById('tb1')
			let oTr = document.createElement('tr')
			let oTd1 = document.createElement('td')
			let oTd2 = document.createElement('td')
			let oTd3 = document.createElement('td')
			let oTd4 = document.createElement('td')
			oTd1.innerText = iName.value
			oTd2.innerText = iClass.value
			oTd3.innerText = iN0.value
			oTd4.innerText = '删除'
			oTd4.className = 'del'
			oTd4.setAttribute('onclick','del(this)')
			oTr.appendChild(oTd1)
			oTr.appendChild(oTd2)
			oTr.appendChild(oTd3)
			oTr.appendChild(oTd4)
			oTableWarrper.appendChild(oTr)
		}
		
		function del(e) {
			e.parentNode.remove()
		}
	</script>
</html>